<template>
    <view class="audio-wrap"><view class="icon " :class="`icon` + index" v-for="(item, index) in 4" :key="index"></view></view>
</template>
<script>
export default {
    name: 'PlayIcons',
    data() {
        return {};
    },
    computed: {},
    methods: {}
};
</script>
<style lang="scss" scoped>
.audio-wrap {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.3);
    .icon {
        position: relative;
        width: 4rpx;
        height: 30rpx;
        background: #fff;
        margin: 0 4rpx;
        transform-origin: 50% 100%;
    }
    .icon0 {
        animation: move 1s ease -0.6s infinite reverse;
    }
    .icon1 {
        animation: move 0.8s ease -0.3s infinite reverse;
    }
    .icon2 {
        animation: move 1.1s ease -1.2s infinite reverse;
    }
    .icon3 {
        animation: move 0.9s ease -0.4s infinite reverse;
    }
}
@keyframes move {
    0% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(0.1);
    }
    100% {
        transform: scaleY(1);
    }
}
</style>
